<template>
  <div>
    <el-page-header @back="goBack" content="新增抽奖转盘活动" style="color:#3198ff"></el-page-header>
    <div style="margin-top: 30px;">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="form-item">
            <span class="title"><span style="color:#F56C6C;width:80px">*</span>转盘标题：</span>
            <el-input type="text" placeholder="请输入" maxlength="50" v-model="Lucktitle"></el-input>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="10">
          <div class="form-item">
            <span class="title"><span style="color:#F56C6C;width:80px">*</span>备注：</span>
            <el-input type="textarea" maxlength="50" placeholder v-model="Mark"></el-input>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="form-item button-container">
            <span class="title"><span style="color:#F56C6C;width:80px">*</span>设置奖品：</span>
            <el-button type="primary" @click="add" icon="el-icon-circle-plus-outline">新增奖品</el-button>
          </div>
        </el-col>
      </el-row>

      <div style="margin-top: 50px">
        <el-table
          ref="multipleTable"
          border
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column prop="title" label="奖品标题">
            <template slot-scope="scope">
              <el-input type="text" maxlength="4" v-model="scope.row.prizeTitle"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="奖品类型" width="500px">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.prizeType"
                placeholder="请选择"
                @change="prizeTypeClick(scope.row)"
              >
                <el-option
                  v-for="dict in lucks"
                  :key="dict.dictValue"
                  :value="dict.dictValue"
                  :label="dict.dictLabel"
                ></el-option>
              </el-select>
              <el-input-number
                type="number"
                :min="0"
                :controls="false"
                v-model="scope.row.intergral"
                :precision="0"
                :step="1"
                v-if="scope.row.prizeType ==1"
                style="margin-left:15px"
              ></el-input-number>
              <span v-if="scope.row.prizeType ==1">积分</span>
              <el-select
                v-model="scope.row.couponId"
                placeholder="请选择"
                v-if="scope.row.prizeType ==2"
                style="margin-left:15px"
                filterable
              >
                <el-option
                  v-for="dict in coupons"
                  :key="dict.couponId"
                  :value="dict.couponId"
                  :label="dict.name"
                ></el-option>
              </el-select>
              <el-select
                v-model="scope.row.skuId"
                placeholder="请选择"
                v-if="scope.row.prizeType ==3"
                style="margin-left:15px"
                filterable
              >
                <el-option
                  v-for="dict in goods"
                  :key="dict.id"
                  :value="dict.id"
                  :label="dict.title"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="tips" label="奖品提示">
            <template slot-scope="scope">
              <el-input type="text" v-model="scope.row.tips"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="probability" label="中奖机率">
            <template slot-scope="scope">
              <el-input-number
                type="number"
                :min="0"
                :max="100"
                :controls="false"
                v-model="scope.row.probability"
                :precision="1"
                :step="0.1"
                style="width:80%"
              ></el-input-number>
              <span>%</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100px">
            <template slot-scope="scope">
              <el-popconfirm title="确定删除此？" @onConfirm="handleClickDelete(scope.$index)">
                <el-button style="margin-left:15px" size="small" type="text" slot="reference">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="text-align:center; margin-top: 50px;">
        <el-button type="primary" @click="submitForm()">提交</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      Lucktitle: "",
      Mark: "",
      lucks: [
        {
          dictValue: 1,
          dictLabel: "积分"
        },
        {
          dictValue: 2,
          dictLabel: "优惠券"
        },
        {
          dictValue: 3,
          dictLabel: "商品"
        }
      ],
      coupons: [],
      goods: [],
      tableData: []
    };
  },
  components: {},
  computed: {},
  beforeMount() {},
  mounted() {
    this.couponsData();
    this.goodsData();
  },
  methods: {
    couponsData() {
      this.$service.lotteryTurntableList(1).then(res => {
        if (res.code == "00000") {
          this.coupons = res.data;
        }
      });
    },
    goodsData() {
      this.$service.lotteryTurntableList(0).then(res => {
        if (res.code == "00000") {
          this.goods = res.data;
        }
      });
    },
    prizeTypeClick(scope) {
      // scope.
    },
    goBack() {
      this.$router.back();
    },
    add() {
      var list = {
        prizeTitle: "",
        prizeType: "",
        intergral: "",
        couponId: "",
        skuId: "",
        tips: "",
        probability: ""
      };
      this.tableData.push(list);
    },
    submitForm() {
      if (this.Lucktitle == "") {
        this.$message({
          message: "请填写转盘标题",
          type: "warning"
        });
        return;
      }
      if (this.Mark == "") {
        this.$message({
          message: "请填写备注",
          type: "warning"
        });
        return;
      }
      if (this.tableData.length == 0) {
        this.$message({
          message: "请设置奖品",
          type: "warning"
        });
        return;
      }
      if (this.tableData.length <6) {
        this.$message({
          message: "请设置不少于6个奖品",
          type: "warning"
        });
        return;
      }
      var probabilitys =0;
      for (let i = 0; i < this.tableData.length; i++) {
        var item = this.tableData[i];
        if (item.prizeTitle == "") {
          this.$message({
            message: "请填写奖品标题",
            type: "warning"
          });
          return;
        }
        if (item.prizeType == "") {
          this.$message({
            message: "请填写完善奖品类型",
            type: "warning"
          });
          return;
        }
        if (item.prizeType == 1 && item.intergral == "") {
          this.$message({
            message: "请填写完善奖品类型",
            type: "warning"
          });
          return;
        }
        if (item.prizeType == 2 && item.couponId == "") {
          this.$message({
            message: "请填写完善奖品类型",
            type: "warning"
          });
          return;
        }
        if (item.prizeType == 3 && item.skuId == "") {
          this.$message({
            message: "请填写完善奖品类型",
            type: "warning"
          });
          return;
        }
        if (item.tips == "") {
          this.$message({
            message: "请填写奖品提示",
            type: "warning"
          });
          return;
        }
        if (item.probability == "") {
          this.$message({
            message: "请填写中奖机率",
            type: "warning"
          });
          return;
        }
        probabilitys =probabilitys+parseInt(item.probability) 
      }
      console.log("pppp",probabilitys)
      if(probabilitys !=100){
        this.$message({
            message: "中奖机率之和必须为100",
            type: "warning"
          });
          return;
      }
      var param = {
        lotteryTurntable: {
          name: this.Lucktitle,
          remark: this.Mark,
          userId: this.Global.user.userId
        },
        truntablePrizeList: this.tableData
      };
      this.$service.insterLottery(param).then(res => {
        if (res.code == "00000") {
          this.$message({
            message: "提交成功",
            type: "success"
          });
          this.$router.back();
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
    },
    handleClickDelete(e) {
      var index = e;
      this.tableData.splice(e, 1);
    },
    handleSelectionChange() {}
  },
  watch: {}
};
</script>
<style scoped>
</style>
